<template>
    <div class="header">
        <div class="nav">
            <router-link to="/home/home_index" class="iconfont icon-leftArr"></router-link>
            <div class="logo"></div>
        </div>
        <div class="instroduct">
            <h2>{{ goodsList.name}}</h2>
            <div class="inStro">
                <span>评价4.5</span>
                <span>月售3552单</span>
                <span>蜂鸟快送约38分钟</span>
            </div>
        </div>
        <div class="reduce">
            <span class="reduce_man">满减</span>
            <span class="reduce_active">满30减15，满60减30，满100减45，满150减60</span>
            <span class="discount">34个优惠</span>
        </div>
             <p class="notice">公告：吾虎将大额满减，满30-15元啦！</p>
    </div>
</template>

<script>
import axios from 'axios'

export default {
    name:'lHeader',
    data (){
        return {
            goodsList:[]
        }
    },

    methods:{
        getList(){
             axios.get('../static/json/goodsInfo.json',{
                 params:{

                 }

        }).then(result=>{
            var res = result.data;
            if (res) {
              // 成功
            //   console.log(res);
              var list=res.rst;
              this.goodsList=list;
            //   console.log( this.goodsList);

            } else {
              alert(1);
            }

        }).catch(error => {
            console.log(error);
          })
        }

    },
     mounted () {
        this.getList();
      },
}
</script>

<style scoped>
    .nav {
        width: 100%;
        height:1rem ;
        background: url(/static/img/background-img.webp) no-repeat  ;
        background-size: 100%;
        position: relative;
        padding: 0.05rem;
        box-sizing: border-box;
    }
    .nav .iconfont {
        color: white;
        font-size: .2rem;
        font-weight: bold;
    }
    .logo {
        width: 0.7rem;
        height: 0.7rem;
        background: url(https://fuss10.elemecdn.com/0/f5/b3a18268bcf75fdad1d86383e93cejpeg.jpeg?imageMogr/format/webp/thumbnail/150x/) no-repeat;
        background-size: 100%;
        position: absolute;
        top:50%;
        left: 50%;
        margin-left: -0.5rem;
        z-index: 10;
    }
    .instroduct {
        /* height: 1rem; */
        margin-top:-0.1rem;
        padding-top:0.5rem;
        text-align: center;
    }
    .instroduct h2 {
        font-size: 0.18rem
    }
    .inStro {
        margin-left: 0.2rem;
    }
    .inStro span {
        margin-left: 0.05rem;
        font-size: 0.1rem;
    }
    .reduce {
        font-size: 0.1rem;
        display: flex;
        padding:0 0.4rem;
    }
    .reduce span {
        display: block;
        float: left;
    }
   .reduce .reduce_man {
       width: 0.27rem;
       height: 0.13rem;
       line-height: 0.13rem;
       background:#F07373;
       color: #ffffff;
       text-align: center;
   }
    .reduce .reduce_active {
        width:1.9rem ;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin:0 0.1rem;
    }
    .reduce .discount,.notice {
        color: #999999;
    }
    .notice {
        margin-left: 0.4rem;
        font-size: 0.1rem;
    }
</style>
